$(function(){
  // 获取cookie的username，如果cookie中的username有值，则表示用户已经登录，否则未登录
  var username = getCookie('username');
  var login = document.querySelector('.login');
  if(username){
    // 用户已经登录，在顶部导航栏，显示用户的信息，及显示退出按钮
    var str = `<li><a>欢迎尊贵的<span>${username}</span>VIP来到旅游网站！</a></li>
    <li><a href="javascript:;" class="logout">退出</a></li>`;
    login.innerHTML = str;
    // 退出功能,点击退出
    var logout = document.querySelector('.logout');    
    logout.onclick = function(){
      // 使用layer的confirm弹出层，展示 确定 和 取消 的选项
      layer.confirm('你确定要退出吗？',{ btn:['确定','取消'] },
        // 第一个 确定 按钮点击触发的函数
        function(){
          // 删除cookie，退出登录状态
          delCookie('username');
          login.innerHTML = `<li><a href="denglu.html">登陆</a></li>
          <li><a href="zhuce.html">注册</a></li>`;
          layer.msg('退出成功',{icon:1,time:500})
        },
        // 第二个 取消 按钮 点击触发的函数
        function(){
          layer.msg('已取消',{icon:1,time:500})
          return false;
        }
      )
    }
  }
  
})

// 此处是详情页面的js
// 获取url中数据,判断url是否符合规则
// console.log(location.search.match(/id=\d+/));
let urlParams = location.search.match(/id=(\d+)$/);
// 判断url参数是否符合规则
if (!urlParams) {
  // 弹出一个提示层，两秒然后跳转到列表页面
  let index = layer.msg('非法请求', {
    icon: 2,
    time: 0
  });
  setTimeout(function () {
    layer.close(index);
    location.href = './list.html'
  }, 2000);
} else {
  // 参数符合规则，获取景点的id
  var id = urlParams[1];
  var index = layer.load( {
    shade: [0.5, '#ccc'] //0.1透明度的白色背景
  });
  // 根据id发起ajax请求
  // 使用async/await配合jq的ajax请求,并渲染页面的数据，
  async function getInfo() {
    let res = await pAjax({
      url: '../serves/detail.php',
      dataType: 'json',
      data: {
        id
      }
    });

    // 接收到景点信息
    let data = res.data;
    let imgs = data.imgpath.split('==========')
    // 在页面中显示渲染数据
    $('.enlarge .middle>img').attr('src', imgs[0]);
    $('.enlarge .middle .big img').attr('src', imgs[0]);
    for (let i = 0; i < imgs.length; i++) {
      $('.enlarge .small ul').append($(`<li><img src="${imgs[i]}"></li>`))

    }
    // 调用放大镜
    enlarge()
    // 显示的信息替换
    $('.description>h4').text(data.name);  // 渲染标题
    $('.description .price .souceprice').text(data.price);  // 渲染价格
    $('.tab ol li').eq(0).text(data.introduce);  // 渲染商品介绍
    // 将景点商品的库存放到标签属性上
    $('.addCart .number').attr('stock', data.stock);
    setTimeout(function(){
      layer.close(index);
    }, 2000);
  }
  getInfo()

  // 实现点击加 和 减
  $('.addCart .number .add').click(function () {
    // 获取库存
    let stock = $('.addCart .number').attr('stock');
    // 获取输入框中的值
    let num = $(this).prev().val() - 0;
    num++;
    // console.log(stock);
    if (num >= stock) {
      num = stock;
      // 禁用按钮
      $(this).prop('disabled', true);
    }
    $(this).next().prop('disabled', false); // 将禁用的-号按钮解禁
    $(this).prev().val(num);
  })
  // 实现点击减
  $('.addCart .number .reduce').click(function () {
    // 获取输入框中的值
    let num = $(this).prev().prev().val() - 0;
    num--;
    if (num <= 1) {
      num = 1;
      // 禁用按钮
      $(this).prop('disabled', true);
    }
    $(this).prev().prop('disabled', false); // 将禁用的+号按钮解禁
    $(this).prev().prev().val(num);
  })

  // 点击加入购物车
  $('.addCart .addBtn').click(function () {
    // 判断是否登录，如果没有登录则跳转到登录页面
    let username = getCookie('username');
    if (!username) {
      // 没有登录
      let index = layer.msg('请先登录');
      setTimeout(function () {
        layer.close(index);
        location.href = './denglu.html'
      }, 2000)
      return false;
    }    
    // 准备加入购物的数量
    let num = $('.addCart>.number>#num').val() - 0;
    // console.log(num);
    // 用户已经登录加入购物车
    // 获取本地购物车中的数据，判断是否有
    let data = localStorage.getItem('data');
    if (data) {
      // 本地购物车中数据
      // 判断购物车中是否有当前要添加的景点的id,
      // 判断id与用户名
      data = JSON.parse(data);
      // console.log(data);
      let arr = data.filter(item => {
        return username === item.username && id === item.id;
      })
      if (arr.length) {
        // 之前的购物车中有这个景点的数据,只需要在之前的数量上累加
        //  console.log((arr[0].num-0) + num);
        data.forEach(item => {
          if (username === item.username && id === item.id) {
            item.num = (arr[0].num - 0) + num
          }
        })
      } else {
        // console.log(arr);
        // 之前的购物车中没有这个景点的数据，将当前数据追加
        data.push({username,id,num})
      }
      localStorage.setItem('data', JSON.stringify(data))
    } else {
      // 本地购物车localStorage中没有数据
      // 则将这个的购物车数据添加  [{username,id,num}]  // 用户名，商品id，选购的数量
      localStorage.setItem('data', JSON.stringify([{username,id,num}]));
    }
    layer.msg('加入购物车成功', {
      icon: 1,
      time: 1000
    })
  })
}

